import React, { useEffect } from 'react'
import { Form, Radio, Button, Select, Input,Update } from 'antd'
const System = ({system_config,Update}) => {
    const [form] = Form.useForm();


    console.log(system_config)

    useEffect(() => {
        form.setFieldsValue(system_config)
    }, [system_config])

    const BarrierGate = [
        {
            label: "空闲",
            vlaue: "0"
        },
        {
            label: "脏柜并不能被分配",
            vlaue: "8"
        },

    ]


    const Save = () => {
        form.validateFields().then(values => {
            console.log(values)
            Update("system_config",JSON.stringify(values))
        })
    }

    return (
        <div style={{ marginTop: "3vh" }}>
            <div
                style={{ fontSize: '20px', fontWeight: '550', margin: "30px" }}
            >系统参数设置
            </div>
            <Form
                name="basic"
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 650 }}
                autoComplete="off"
                form={form}
            >
                <Form.Item
                    label="出场授权结束后柜状态"
                    name="shouquanhouzhuangtai"
                    initialValue={1}
                >
                    <Select showSearch placeholder="道闸上报">
                        {BarrierGate.map(item => (
                            <Select.Option key={item.vlaue} value={item.vlaue}>{item.label}</Select.Option>
                        ))}
                    </Select>
                </Form.Item>

                <Form.Item
                    label="更衣柜私密"
                    name="gygsm"
                   
                >

                    <Select>
                        <Select.Option value="1">禁用</Select.Option>
                        <Select.Option value="0">启用</Select.Option>
                    </Select>

                </Form.Item>

                <Form.Item
                    label="查询黑名单"
                    name="chaxunheimingdan"
                   
                >
                    <Select>
                        <Select.Option value="1">开锁不查询黑名单</Select.Option>
                        <Select.Option value="0">开锁查询黑名单</Select.Option>
                    </Select>

                </Form.Item>
                <Form.Item
                    label="单条指令类重发次数"
                    name="danzhilingchongfa"
                    initialValue={5}
                >
                    <Input max={10} />
                </Form.Item>
                <Form.Item
                    label="广播类指令重发次数"
                    name="guangbozhilingchongfa"
                    initialValue={6}
                >
                    <Input  max={10} />
                </Form.Item>

                <Form.Item
                    label="上报通信模式"
                    name="shangbaomoshi"
                    initialValue={1}
                >
                    <Radio.Group

                        options={[
                            { value: "mqtt", label: 'MQTT' },
                            { value: "http", label: 'HTTP' },

                        ]}
                    />
                </Form.Item>



                <Form.Item wrapperCol={{ offset: 7, span: 16 }}>
                    <Button type="primary" htmlType="submit" onClick={Save}>
                        保存并设置
                    </Button>

                </Form.Item>
            </Form>


        </div>
    )
}

export default System